import React from 'react'
import PropTypes from 'prop-types'
import tabStyle from '../tab.module.scss'

const LeftTitle = (props) => {
  const { list, handleTabClick, tabIndex } = props
  return (
    <div>
      {list.map((item, index) => {
        return (
          <span
            className={tabIndex === index ? `${tabStyle.title} ${tabStyle.active}` : tabStyle.title}
            onClick={() => handleTabClick && handleTabClick(index, item)}
            key={item.name}
          >
            {item.name}
          </span>
        )
      })}
    </div>
  )
}

// 设置默认值
LeftTitle.defaultProps = {
  tabIndex: 0,
}
// 校验
LeftTitle.propTypes = {
  tabIndex: PropTypes.number,
  handleTabClick: PropTypes.func,
}

export default LeftTitle
